<template>
  <a-row >
    <a-col>
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="queryParam" >
            <z-form-item :datas="fieldArr" :form="queryParam" :gutter="24" :toggle="toggleSearchStatus">
              <a-col :span="3" slot="submit-action">
                <a-space :size="6">
                  <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                  <a-button @click="onResetForm" icon="reload">重置</a-button>
                </a-space>
              </a-col>
              <a-col :span="24" slot="slots-region">
                <a-cascader :options="options" placeholder="请选择" v-model="queryParam.region"/>
                <!-- <a-input v-model="queryParam.region"></a-input> -->
              </a-col>
            </z-form-item>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <div>
            <a-button type="primary" @click="clickPush()">人员入职</a-button>
          </div>
        </div>
        <div>
          <a-alert type="info" :showIcon="true">
            <div slot="message">
              当前区域<span >“{{ '等待后端提供接口' }}”</span>累计专干/社工人数<span style="color:#1890FF;"> {{ '等待后端提供接口'
              }} </span>人；今日登录专干/社工 <span style="color:#1890FF;"> {{ '等待后端提供接口' }} </span>人。
            </div>
          </a-alert>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table
            ref="table"
            rowKey="id"
            :showAlert="false"
            :showSelection="false"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @selectedRow="onSelectedRow"
            @change="onTableChange"
          >
            <template slot="action" slot-scope="text, record">
              <a @click="handleDetails(record)">查看</a>
              <a-divider type="vertical" />
              <a>编辑</a>
            </template>
            <template slot="personnelSex" slot-scope="text">
              <span>{{text == 1?'男':'女'}}</span>
            </template>
            <template slot="employmentStatus" slot-scope="text">
              <span>{{text == 1?'在职':'离职'}}</span>
            </template>
          </z-table>
        </div>
        <!--弹窗区域-->
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import address from './address'
import {listFor,listForm} from "@views/sjsk/modules/list";
import departTree from '../../modules/departTree'
import {administrotorsList} from "@api/sjsk/specialist";
export default {
  components: { departTree },
  mixins: [DisabledAuthFilterMixin,listFor,listForm,address],
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 6 },
      rangePickerTime: [],
      show: false,
      closeTip: false,
      visible: false,
      handleModalBool: false,
      isDisabled: true,
      reloading: false,
      toggle: true,
      selectKeys: [],
      form: {},
      queryParam: {},
      handleModalTitle: null,
      /* 查询折叠 */
      toggleSearchStatus:true,
      fieldArr: [
        {label: '姓名', prop: 'personnelName', tagType: 'input', span: 5},
        {label: '手机号', prop: 'phone', tagType: 'input', span: 5},
        {label: '所属区域', prop: 'region', span: 5,tagType: 'slots-region'},
        // {label: '所属区域', prop: 'region', tagType: 'input', span: 5},
        // {label: '所属区域', prop: 'region', tagType: 'linkage-area',span: 5},
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 40,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '姓名',
          dataIndex: 'personnelName',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '性别',
          dataIndex: 'personnelSex',
          width: 40,
          align: 'center',
          scopedSlots: { customRender: 'personnelSex' },
          // customRender: text => {
          //   return <j-ellipsis value={text} length={14} />
          // }
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          width: 80,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '本月签到率',
          dataIndex: 'signRate',
          width: 40,
          align: 'center'
        },
        {
          title: '待办事项完成率',
          dataIndex: 'backlogCompletionRate',
          width: 40,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '所属区域',
          dataIndex: 'region',
          width: 200,
          align: 'center'
        },
        {
          title: 'PC登录时间',
          dataIndex: 'pcLoginTime',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: 'APP登录时间',
          dataIndex: 'appLoginTime',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '在职状态',
          dataIndex: 'employmentStatus',
          width: 40,
          align: 'center',
          scopedSlots: { customRender: 'employmentStatus' },
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      
    }
  },
  created() {},
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
      // this.$refs.ruleForm.validate((valid) => {
      //   if (valid) {
      //     console.log(this.queryParam)
      //   } else {
      //     return false
      //   }
      // })
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.queryParam = {}
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      administrotorsList(form)
        .then(res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 弹窗成功接收
    modalOk(type) {
      this.onQuery()
    },
    getSelectedKeys(keys) {
      console.log(keys)
      this.$set(this.form, 'labelId', keys.join(','))
      this.onQuery()
    },
    // 新增
    clickPush() {
      this.$router.push({
        path:'/personnel/personnelEntry',
      })
    },
    // 详情
    handleDetails(record) {
      console.log(record)
      // this.handleModalTitle = '任务详情'
      // this.$refs.intellDetailModalRef.show(record)
      this.$router.push({
        path:'/personnel/personnellook',
        query:{
          id:record.id
        }
      })
    },
    // 修改分组
    handleProups() {
      let selectList = this.$refs.table.getSelectedRows()
      let idList = selectList.map(v => v.id).filter(obj => obj !== null && obj !== undefined && obj !== '')
      this.$refs.groupsModalRef.edit(idList)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    getTreeData(datas, id) {
      console.log(datas, id)
      console.log(id)
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>
